<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #app {
        width: 100%;
        display: flex;
        justify-content: center;
      }

      .block {
        width: max-content;
      }

      .block .input-msg {
        margin-bottom: 10px;
      }

      table {
        width: 500px;
        border-collapse: collapse;
      }

      tr td,
      tr th {
        border: 1px solid green;
        padding: 10px 0 10px 0;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="block">
        <div class="input-msg">
          <input
            type="text"
            v-model="newMsg.name"
            id="userName"
            placeholder="请输入姓名"
            @keyup.enter="addMsg"
          />
          <input
            type="text"
            v-model="newMsg.sex"
            id="userSex"
            placeholder="请输入性别"
            @keyup.enter="addMsg"
          />
          <input
            type="text"
            v-model="newMsg.tel"
            id="userTel"
            placeholder="请输入手机号"
            @keyup.enter="addMsg"
          />
          <input
            type="text"
            v-model="newMsg.age"
            id="userAge"
            placeholder="请输入年龄"
            @keyup.enter="addMsg"
          />
          <button @click="addMsg">添加</button>
        </div>
        <div>
          <table id="tableMsg">
            <tr>
              <th>学号</th>
              <th>姓名</th>
              <th>性别</th>
              <th>联系方式</th>
              <th style="cursor: pointer;" @click="order('age')">
                年龄<span>{{flag ? down : up}}</span>
              </th>
            </tr>
            <tr v-for="item in msg" :key="item.id">
              <td>{{ item.id }}</td>
              <td>{{ item.name }}</td>
              <td>{{ item.sex }}</td>
              <td>{{ item.tel }}</td>
              <td>{{ item.age }}</td>
            </tr>
          </table>
        </div>
      </div>
    </div>
    <script src="../vue.js"></script>
    <script>
      let app = new Vue({
        el: "#app",
        data: {
          msg: [
            { id: 1, name: "小甜甜", sex: "女", tel: "13412345678", age: 28 },
            { id: 2, name: "珊珊", sex: "女", tel: "13447445678", age: 18 },
            { id: 3, name: "纯纯", sex: "女", tel: "13412585678", age: 11 },
            { id: 4, name: "大华", sex: "男", tel: "13412311278", age: 25 },
            { id: 5, name: "小龙", sex: "男", tel: "13412665878", age: 30 },
          ],
          newMsg: {
            id: "",
            name: "",
            sex: "",
            tel: "",
            age: "",
          },
          num: 6,
          flag: true,
          down: "⬇",
          up: "⬆",
        },
        methods: {
          addMsg() {
            this.newMsg.id = this.num;
            this.newMsg.name = document.querySelector("#userName").value;
            this.newMsg.sex = document.querySelector("#userSex").value;
            this.newMsg.tel = document.querySelector("#userTel").value;
            this.newMsg.age = document.querySelector("#userAge").value;
            this.msg.push(this.newMsg);
            this.newMsg = {
              id: "",
              name: "",
              sex: "",
              tel: "",
              age: "",
            };
            this.num++;
            document.querySelector("#userName").value = "";
            document.querySelector("#userSex").value = "";
            document.querySelector("#userTel").value = "";
            document.querySelector("#userAge").value = "";
          },
          order(age) {
            this.msg.sort((a, b) => {
              let value1 = a[age];
              let value2 = b[age];
              if (this.flag) {
                return value1 - value2;
              } else {
                return value2 - value1;
              }
            });
            this.flag = !this.flag;
          },
        },
      });
    </script>
  </body>
</html>
